<template>
    <el-header>
        <div class="web-container">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item class="web-header" index="/home">首页</el-menu-item>
                <el-menu-item class="web-header" index="/blog">博客</el-menu-item>
                <el-menu-item class="web-header" index="/rank">排行</el-menu-item>
                <el-menu-item class="web-header" index="/question">问答</el-menu-item>
                <el-menu-item class="web-header" index="/message">消息</el-menu-item>
                <el-menu-item class="web-header" index="/log">发布日志</el-menu-item>
                <el-menu-item class="web-header" index="/manage">管理</el-menu-item>
                <span class="web-auth-block">
                    <el-button type="text" size="mini" class="web-auth" @click="login">登录</el-button>
                    <el-divider class="web-auth" direction="vertical"></el-divider>
                    <el-button type="text" size="mini" class="web-auth" @click="register">注册</el-button>
                </span>
            </el-menu>
            <el-divider content-position="right"><span class="web-footer-font">彼时当年少，莫负好时光</span></el-divider>
        </div>
    </el-header>
</template>

<script>
export default {
    name: "Header",
    data(){
        return{
            activeIndex:'/home'
        }
    },
    methods:{
        handleSelect(key) {
            this.$router.push(key)
        },
        login(){
            this.$router.push("/login")
            console.log("login");
        },
        register(){
            this.$router.push("/register")
            console.log("register");
        },
    }
}
</script>

<style scoped>

</style>
